<template>
  <div class="backup-page">
    <el-card>
      <template #header>
        数据备份
        <el-button type="primary" style="float:right" @click="create">创建备份</el-button>
      </template>
      <el-table :data="backups" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="fileName" label="文件名" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="restore(row.id)">恢复</el-button>
            <el-button size="small" type="danger" @click="remove(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  createBackupApi,
  fetchBackupData,
  restoreBackupApi,
  deleteBackupApi
} from '@/api/backupApi'

const backups = ref<any[]>([])

const loadData = async () => {
  const { data } = await fetchBackupData()
  // 兼容后端返回 { list, total } 结构
  if (Array.isArray(data)) {
    backups.value = data
  } else if (data && Array.isArray(data.list)) {
    backups.value = data.list
  }
}

const create = async () => {
  await createBackupApi()
  ElMessage.success('备份已创建')
  loadData()
}

const restore = (id: number) => {
  ElMessageBox.confirm('确定恢复该备份吗？').then(async () => {
    await restoreBackupApi(id)
    ElMessage.success('已恢复')
    loadData()
  })
}

const remove = (id: number) => {
  ElMessageBox.confirm('确定删除该备份吗？', '提示', { type: 'warning' }).then(async () => {
    await deleteBackupApi(id)
    ElMessage.success('已删除')
    loadData()
  })
}

onMounted(loadData)
</script> 